<template>
  <div class="tab_class">
    <div>
      <div class="van-search" style="background: #dddddd">
        <div
          class="van-search__content van-search__content--round"
          @click="$router.push({ name: 'search' })"
        >
          <div class="van-cell van-cell--borderless van-field">
            <div class="van-field__left-icon">
              <i
                class="van-icon van-icon-search"
                style="height: 1.1rem; color: #1d5ae8"
              ></i>
            </div>
            <div class="van-cell__value van-cell__value--alone">
              <div class="van-field__body">
                <input
                  style="font-size: 14px"
                  type="search"
                  placeholder="搜索"
                  class="van-field__control"
                />
              </div>
            </div>
          </div>
        </div>
        <span @click="redirectTo('/order')" style="margin-left: 2%">
          &nbsp;
          <van-icon name="cart" size="22" color="#1d5ae8" />
        </span>
      </div>
    </div>

    <!-- <van-sticky> -->
    <van-row style="width: 100%; padding-right: 10px; background-color: #fff">
      <!-- 侧边栏区域 -->
      <van-col
        span="5"
        class="scrobar"
        style="
          border-right: 1px solid #f0efef;
          overflow: scroll;
          height: 92.5vh;
        "
      >
        <van-sidebar v-model="activeKey" @change="onChange">
          <van-sidebar-item
            v-for="(item, index) in sideBarList"
            :key="index"
            :title="item.name"
          />
        </van-sidebar>
      </van-col>
      <!-- 右侧内容区域 -->
      <van-col style="padding-left: 10px" span="19">
        <!-- 广告位 -->
        <div
          class="hot_cont_gg"
          @click="$router.push(`${advertisingList[0].link}`)"
        >
          <img style="border-radius: 3px" :src="advertisingImgUrl" alt />
        </div>
        <!-- 上面的图片 -->
        <!-- <div class="hot_cont_top" v-show="imgShow">
          <img src="@/assets/images/recommended_hot.png" alt />
        </div>-->
        <div class="hot_cont_top">
          <!-- <span>{{titleClass}}</span> -->
          <!-- 分割线 -->
          <van-divider>{{ titleClass }}</van-divider>
        </div>
        <!-- 数据渲染内容区域 -->
        <van-list
          style="overflow: scroll; height: 80vh"
          :immediate-check="false"
          finished-text="没有更多了"
          v-model="loading"
          :finished="finished"
          @load="onLoad"
        >
          <van-row
            class="hot_cont"
            v-for="(item, index) in categoryDataList"
            :key="index"
            @click="$router.push(`/items/detail/${item.id}/e`)"
          >
            <van-col span="8">
              <van-image radius="5" width="100%" :src="item.gallery[0]" />
            </van-col>
            <van-col span="16">
              <div class="hot_cont_rig">
                <div class="cont1">{{ item.name }}</div>
                <div class="cont2">{{ item.brief }}</div>
                <div class="cont3" v-if="item.keywords">
                  <span
                    v-for="(item1, index) in getKeywords(item.keywords)"
                    :key="index"
                  >
                    <van-tag class="tag" color="#E2E8F8">{{ item1 }}</van-tag>
                  </span>
                </div>
                <div class="cont4">{{ (item.retailPrice * 100) | yuan }}</div>
                <div class="cont5" v-if="item.memberPrice">
                  <!-- <span>{{ (item.memberPrice * 100) | yuan }}</span>
                  <img src="@/assets/images/member_price.png" alt /> -->
                </div>
              </div>
            </van-col>
          </van-row>
        </van-list>
      </van-col>
    </van-row>
  </div>
</template>

<script>
import {
  adList,
  catalogList,
  catalogCurrent,
  firstCategory,
  ListByFirstCategory,
} from '@/api/api';
import category_default from '@/assets/images/category_default.png';
import { getLocalStorage } from '@/utils/local-storage';
import {
  Search,
  Divider,
  Row,
  Col,
  SidebarItem,
  Sidebar,
  Image,
  Tag,
  List,
  Sticky,
} from 'vant';

export default {
  props: {
    itemClass: {
      type: [String, Number],
    },
  },
  data() {
    return {
      categoryIndex: 0,
      advertisingImgUrl: '',
      advertisingList: [],
      titleClass: '',
      imgShow: true,
      textShow: false,
      indexSideBar: 0,
      category: {
        categoryId: null,
        limit: 5,
        page: 0,
      },
      loading: false,
      finished: true,
      categoryDataList: [],
      sideBarList: [],
      activeKey: 0,
      category_default: category_default,
      categoryList: [],
      currentCategory: {},
      currentSubCategoryList: [],
      goods_item_height: 0,
      categoryId: 0,
      defaultCategoryId: 0,
    };
  },

  created() {
    this.getCategoryList();
    this.getAdvertisingImg();
  },

  watch: {
    $route() {
      this.category.page = 0;
      if (0 >= this.category.page) {
        this.categoryDataList = [];
      }
      this.getCategoryList();
    },
  },

  beforeRouteLeave(to, from, next) {
    // 仅适用于本页面不作为H5着陆页的情况
    if (to.name != 'detail') {
      this.categoryId = this.defaultCategoryId;
    }
    next();
  },

  methods: {
    // 广告位置图片获取
    getAdvertisingImg() {
      adList({ position: 23 })
        .then((res) => {
          this.advertisingList = res.data.data.list;
          this.advertisingImgUrl = res.data.data.list[0].url;
        })
        .catch((err) => {});
    },

    // 获得tag关键词
    getKeywords(str) {
      let arr = [];
      arr = str.split(',');
      return arr;
    },
    // 改变事件 sidebar
    onChange(index) {
      this.titleClass = this.sideBarList[index].name;
      // if (index == 0) {
      //   this.imgShow = true;
      //   this.textShow = !this.imgShow;
      //   return;
      // }
      let upsc = document.querySelector('.scrobar');
      upsc.scrollTop = 46 * index;
      this.category.categoryId = this.sideBarList[index].id;
      this.category.page = 0;
      if (0 >= this.category.page) {
        this.categoryDataList = [];
      }
      this.getCategoryDataList();
    },
    // 获得一级分类列表
    getCategoryList() {
      // console.log(111111111111);
      firstCategory()
        .then((res) => {
          this.sideBarList = res.data.data;
          if (
            this.$route.query.itemClass != null &&
            this.$route.query.itemClass != undefined
          ) {
            if (
              this.categoryId == this.defaultCategoryId ||
              this.categoryId != 0
            ) {
              this.categoryId = this.$route.query.itemClass;
            }
            // this.changeCatalog(this.categoryId);
          } else {
            // console.log(111, this.sideBarList);
            this.category.categoryId = this.sideBarList[0].id;
            // console.log(this.category.categoryId);
            this.titleClass = this.sideBarList[0].name;
            this.activeKey = 0;
          }
          this.sideBarList.filter((currentValue, index) => {
            if (this.categoryId == 0) return;
            if (currentValue.id == this.categoryId) {
              this.categoryIndex = index;
              this.activeKey = index;
            }
            this.category.categoryId = this.categoryId;
            this.titleClass = this.sideBarList[this.categoryIndex].name;
          });
          // 获得一级分类数据
          this.getCategoryDataList();
        })
        .catch((err) => {});
    },
    // 获得一级分类下的数据
    getCategoryDataList() {
      this.category.page++;
      ListByFirstCategory(this.category)
        .then((res) => {
          this.categoryDataList.push(...res.data.data.list);
          this.loading = false;
          this.finished = res.data.data.page >= res.data.data.pages;
        })
        .catch((e) => {
          this.page--;
          this.loading = false;
          this.finished = true;
        });
    },

    // van-list onload事件
    onLoad() {
      this.getCategoryDataList();
    },
    //原本就有的
    redirectTo(link) {
      this.$router.push({ path: link });
    },
    setClass(goodsList, index) {
      if (goodsList == 3 || goodsList > 4) {
        if ((index + 1) % 3 == 0) {
          return 'goods_item_3th';
        } else {
          return 'goods_item_three';
        }
      } else {
        return 'goods_item_two';
      }
    },

    changeCatalog(id) {
      // this.categoryId = id;
      catalogCurrent({ id: id }).then((res) => {
        let data = res.data.data;
        this.currentCategory = data.currentCategory;
        this.currentSubCategoryList = data.currentSubCategory;
      });
    },
    toItemList(id) {
      this.$router.push({
        name: 'category',
        query: { keyword: '', itemClass: id },
      });
    },
  },
  components: {
    [Search.name]: Search,
    [Divider.name]: Divider,
    [Row.name]: Row,
    [Col.name]: Col,
    [SidebarItem.name]: SidebarItem,
    [Sidebar.name]: Sidebar,
    [Image.name]: Image,
    [Tag.name]: Tag,
    [List.name]: List,
    [Sticky.name]: Sticky,
  },
};
</script>


<style lang="scss" scoped>
@import '../../assets/scss/mixin';
.van-search {
  padding: 0.75rem 4%;
}

.van-search .van-cell {
  line-height: 1rem;
  font-size: 0.5rem;
  padding: 0.25rem 10px;
  background: #ffffff;
}

.van-search__content {
  border-radius: 0px !important;
  height: 1.5rem;
  background: #dddddd !important;
}

.van-search,
.van-search__content {
  background: #f2f1f6 !important;
  //padding: 0.75rem 4%;
}

.van-search .van-cell {
  border: 1px solid #1d5ae8;
  border-radius: 0.5px;
  border-radius: 3px;
}
/deep/.van-icon-search::before {
  color: #1d5ae8;
}
.van-sidebar {
  width: 100%;
}
.van-image {
  vertical-align: bottom;
}
// .hot_cont_top {
//   display: flex;
//   align-items: center;
//   width: 93px;
//   height: 50px;
//   img {
//     width: 100%;
//   }
//   span {
//     font-size: 16px;
//     font-weight: 700;
//   }
// }
.hot_cont_top {
  color: #1d5ae8;
  display: flex;
  justify-content: center;
}
.hot_cont {
  display: flex;
  width: 100%;
  margin-bottom: 25px;

  .hot_cont_rig {
    width: 100%;
    padding-left: 6px;
    .cont1 {
      font-weight: 700;
      font-size: 15px;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
    }
    .cont2 {
      font-size: 12px;
      color: rgba(166, 164, 164, 1);
      margin-top: 3px;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
    .cont3 {
      // margin-top: 7px;
      span {
        color: #1d5ae8;
        padding-top: 0.1rem;
        .van-tag:nth-of-type(n + 1) {
          margin: 7px 8px 0 0;
        }
      }
    }
    .cont4 {
      margin-top: 8px;
      font-size: 16px;
      font-weight: 700;
      color: rgba(247, 7, 7, 1);
    }
    .cont5 {
      display: flex;
      align-items: center;
      margin-top: 5px;
      font-size: 16px;
      font-weight: 700;
      img {
        margin-left: 6px;
        width: 48px;
        height: 16px;
      }
    }
  }
}
.hot_cont_gg {
  // border-radius: 5px;s
  // overflow: hidden;
  width: 100%;
  img {
    margin-top: 10px;
    vertical-align: top;
    width: 100%;
    padding-right: 2px;
  }
}
/deep/ .van-sidebar-item {
  display: block;
  box-sizing: border-box;
  text-align: center;
  padding: 40px 0;
  height: 100%;
  overflow: hidden;
  color: #323233;
  font-size: 14px;
  word-wrap: break-word;
  background-color: #e7e6e6;
  // border-left: 1px solid #f0efef;
  -webkit-user-select: none;
  user-select: none;
}
/deep/ .van-sidebar-item__text {
  width: 100%;
}
.van-sidebar-item {
  border-left: 0px;
}
.van-sidebar-item--select {
  position: relative;
  display: flex;
  align-items: center;
  padding: 0 0 0 2px !important;
  word-wrap: break-word;
  height: 60px;
  color: #1d5ae8;
  font-weight: 700;
  background-color: #fff;
}
/deep/.van-sidebar-item--select::after {
  content: '';
  position: absolute;
  right: 0 !important;
  top: 50%;
  transform: translateY(-50%);
  width: 2px;
  height: 100%;
  background-color: #1d5ae8;
}
/deep/.van-search {
  background-color: #f0efef !important;
}
/deep/.van-sidebar-item--select::before {
  background-color: white !important;
}
.view-router {
  padding-bottom: 0;
}
.van-divider {
  width: 154px;
  height: 26px;
  font-weight: 700;
  font-size: 14px;
  color: #1d5ae8;
}
.van-divider::after {
  border-color: #1d5ae8;
  opacity: 0.7;
}
.van-divider::before {
  border-color: #1d5ae8;
  opacity: 0.7;
}
.scrobar::-webkit-scrollbar {
  display: none;
}
</style>
